import React, { Component } from 'react';
import "./index.css"
import { Button, Input, Table, Switch } from 'antd';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import axios from '../../../../../util/axios';
const { Search } = Input;
class Staff extends Component {
    state = {
        columns: [
            {
                title: '登录姓名',
                dataIndex: 'username',
                key: 'username',
                align: "center"
            },
            {
                title: '密码',
                dataIndex: 'password',
                key: 'password',
                align: "center"
            },
            {
                title: '权限组',
                dataIndex: 'nickname',
                key: 'nickname',
                align: "center"
            },
            {
                title: '简单说明',
                dataIndex: 'title',
                key: 'title',
                align: "center"
            },
            {
                title: '状态',
                dataIndex: 'lls',
                key: 'lls',
                align: "center",
                render: (text, record) => <Switch checked={record.lls.length === 4 ? true : false} disabled={true} onChange={this.onChange} />,
            },
            {
                title: '操作',
                align: "center",
                render: (text, record) => <div style={{ display: "flex", alignItems: "center", justifyContent: "space-around" }}>

                    <Button type="primary" icon={<EditOutlined />} onClick={() => { this.changeVal(record) }} />
                    <Button type="primary" danger icon={<DeleteOutlined />} style={{ margin: "0 5px" }} onClick={() => { this.deltetIt(record.id) }} />

                </div>
            },
        ],
        list: [],
        loading: true,
        isShow: false,
        isAdd: false,
        inpValObj: {
            longinName: "",
            name: "",
            auth: "",
            text: "",
            state: false,

        },
        coeId: ""
    }
    componentDidMount() {
        this.getList()
    }
    onChange(checked) {
        console.log(`switch to ${checked}`);

    }
    //编辑
    changeVal = (record) => {
        console.log(record)
        this.setState({
            isShow: true,
            coeId: record.id,
            inpValObj: {
                longinName: record.username,
                name: record.password,
                auth: record.nickname,
                text: record.title,
                state: record.lls.length === 4 ? true : false,
            }
        })

    }
    //删除
    deltetIt = (id) => {
        console.log(id)
        axios.get(`/loginquan?id=${id}`).then(res => {
            console.log(res)
            if (res.data.code === 200) {
                setTimeout(() => {
                    this.getList()
                }, 800);
            }
        })
    }
    getList() {
        axios.get('/loginquan').then(res => {
            console.log(res)
            if (res.data.code === 200) {
                setTimeout(() => {
                    this.setState({
                        list: res.data.data,
                        loading: false
                    })
                }, 800);
            }
        })
    }
    onSearch = value => console.log(value);
    //新增
    addNewList = () => {
        this.setState({
            isShow: true,
            isAdd: true
        })
        //style={{ display: this.state.isShow ? 'block' : "none" }}
    }
    onFinish = (values) => {
        console.log(values);
    };


    changeLogin = (e) => {
        this.setState({
            inpValObj: {
                ...this.state.inpValObj,
                longinName: e.target.value
            }
        })
    }
    changeName = (e) => {
        this.setState({
            inpValObj: {
                ...this.state.inpValObj,
                name: e.target.value
            }
        })
    }
    changeAuth = (e) => {
        this.setState({
            inpValObj: {
                ...this.state.inpValObj,
                auth: e.target.value
            }
        })
    }
    changeText = (e) => {
        this.setState({
            inpValObj: {
                ...this.state.inpValObj,
                text: e.target.value
            }
        })
    }
    changeState = (e) => {
        this.setState({
            inpValObj: {
                ...this.state.inpValObj,
                state: e
            }
        })
    }
    //确定
    submit = () => {
        console.log(this.state.isAdd)
        if (this.state.isAdd) {
            axios.get(`/loginquan`, {
                params: {
                    username: this.state.inpValObj.longinName,
                    password: this.state.inpValObj.name,
                    nickname: this.state.inpValObj.auth,
                    lls: this.state.inpValObj.state,
                    title: this.state.inpValObj.text
                }
            }).then(res => {
                console.log(res)
                if (res.data.code === 200) {
                    this.getList()
                }
            })
        } else {
            axios.get(`/loginquans`, {
                params: {
                    id: this.state.coeId,
                    username: this.state.inpValObj.longinName,
                    password: this.state.inpValObj.name,
                    nickname: this.state.inpValObj.auth,
                    title: this.state.inpValObj.text,
                    lls: this.state.inpValObj.state
                }
            }).then(res => {
                console.log(res)
                if (res.data.code === 200) {
                    this.getList()
                }
            })
        }
        console.log(this.state.inpValObj)
        this.setState({
            isShow: false,
            inpValObj: {
                longinName: "",
                name: "",
                auth: "",
                text: "",
                state: false
            }
        })
    }
    //取消
    onReset = () => {
        console.log(this.state.coeId)
        this.setState({
            isShow: false,
            inpValObj: {
                longinName: "",
                name: "",
                auth: "",
                text: "",
                state: false
            }
        })
    }
    render() {
        let { longinName, name, auth, text, state } = this.state.inpValObj
        return (
            <div className='Staff'>
                <div className="StaffHead">
                    <Button type="primary" onClick={this.addNewList}>新增</Button>
                    <Search placeholder="input search text" onSearch={this.onSearch} style={{ width: 200 }} />
                </div>
                <div className="StaffMina">
                    <Table dataSource={this.state.list} columns={this.state.columns} rowKey="id" loading={this.state.loading} />
                </div>
                <div className="Staff_mask" style={{ display: this.state.isShow ? 'block' : "none" }}>
                    <div className="Staff_mask_inner">
                        <h3>{this.state.isAdd ? '新增' : "编辑"}</h3>
                        <ul className='changeList'>
                            <li>
                                <p>登录姓名:&nbsp;&nbsp;</p>
                                <input type="text" value={longinName} onChange={this.changeLogin} />
                            </li>
                            <li>
                                <p>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;&nbsp;</p>
                                <input type="text" value={name} onChange={this.changeName} />
                            </li>
                            <li>
                                <p>权&nbsp;&nbsp;限&nbsp;&nbsp;组:&nbsp;&nbsp;</p>
                                <input type="text" value={auth} onChange={this.changeAuth} />
                            </li>
                            <li>
                                <p>简单说明:&nbsp;&nbsp;</p>
                                <input type="text" value={text} onChange={this.changeText} />
                            </li>
                            <li>
                                <p>状态:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                                <Switch checked={state} onChange={this.changeState} />
                            </li>
                        </ul>
                        <div className="staff_btn">
                            <Button type="primary" htmlType="submit" onClick={this.submit}>  确定  </Button>
                            <Button htmlType="button" onClick={this.onReset}> 取消</Button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Staff;
